<template>
  <div :class="className" :style="{height:height,width:width}" />
</template>

<script>
  import echarts from 'echarts'
  require('echarts/theme/macarons') // echarts theme
  import resize from './resize'
  export default {
    mixins: [resize],
    props: {
      className: {
        type: String,
        default: 'chart'
      },
      width: {
        type: String,
        default: '100%'
      },
      height: {
        type: String,
        default: '100%'
      },
      autoResize: {
        type: Boolean,
        default: true
      }
    },
    data() {
      return {
        chart: null,
        g_cellBar0_y: null,
        g_cellBarImg0_y: null,
        myColor: ['#81E7ED'],
        dataLine: [90, 100, 100, 100, 100, 100, 100, 100],
        positionLeft: 15,
        max: 125,
        num: null
      }
    },
    mounted() {
      this.$nextTick(() => {
        const _this = this
        this.initChart()
        setInterval(function() {
          if (_this.dataLine[7] < 100) {
            _this.dataLine[7] += 5
          } else if (_this.dataLine[6] < 100) {
            _this.dataLine[6] += 5
          } else if (_this.dataLine[5] < 100) {
            _this.dataLine[5] += 5
          } else if (_this.dataLine[4] < 100) {
            _this.dataLine[4] += 5
          } else if (_this.dataLine[3] < 100) {
            _this.dataLine[3] += 5
          } else if (_this.dataLine[2] < 100) {
            _this.dataLine[2] += 5
          } else if (_this.dataLine[1] < 100) {
            _this.dataLine[1] += 5
          } else if (_this.dataLine[0] < 100) {
            _this.dataLine[0] += 5
          } else {
            _this.dataLine = [0, 0, 0, 0, 0, 0, 0, 0]
          }

          _this.initChart()
        }, 2000)
      })
    },
    beforeDestroy() {
      if (!this.chart) {
        return
      }
      this.chart.dispose()
      this.chart = null
    },
    methods: {
      initChart() {
        this.chart = echarts.init(this.$el, 'macarons')
        this.g_cellBar0_y = ''
        this.g_cellBarImg0_y = new Image()
        this.g_cellBarImg0_y.src = this.g_cellBar0_y
        this.chart.setOption({
          animation: false,
          backgroundColor: '#101E44',
          grid: [{
            left: '5%',
            top: '3%',
            right: '5%',
            bottom: '3%',
            containLabel: true
          },
          {
            left: '10%',
            top: '12%',
            right: '5%',
            bottom: '8%',
            containLabel: true
          }
          ],
          xAxis: [{
            max: this.max,
            show: false
          }],
          yAxis: [{
            axisTick: 'none',
            axisLine: 'none',
            axisLabel: {
              inside: true,
              align: 'left',
              textStyle: {
                color: '#81E7ED',
                fontSize: '16'
              }
            },
            z: 10,
            data: ['生焦', '预热', '试压', '除焦', '排水', '冷焦', '大吹气', '小吹气']
          }, {
            axisTick: 'none',
            axisLine: 'none',
            show: true,
            axisLabel: {
              inside: true,
              align: 'right',
              textStyle: {
                color: '#ffffff',
                fontSize: '16'
              }
            },
            z: 10,
            data: this.dataLine
          }, {

            axisLine: {
              lineStyle: {
                color: 'rgba(0,0,0,0)'
              }
            },
            data: []
          }],
          series: [

            { // 间距
              type: 'bar',
              barWidth: 20,
              stack: 'b',
              legendHoverLink: false,
              itemStyle: {
                normal: {
                  color: 'rgba(0,0,0,0)'
                }
              },
              z: 3,
              data: [this.positionLeft, this.positionLeft, this.positionLeft, this.positionLeft, this.positionLeft, this.positionLeft, this.positionLeft, this.positionLeft]
            }, {
              name: '条',
              type: 'bar',
              stack: 'b',
              yAxisIndex: 0,
              data: this.dataLine,
              label: {
                normal: {
                  show: false,
                  position: 'right',
                  distance: 10,
                  formatter: function(param) {
                    return param.value + '%'
                  },
                  textStyle: {
                    color: '#ffffff',
                    fontSize: '16'
                  }
                }
              },
              barWidth: 30,
              itemStyle: {
                color: {
                  image: this.g_cellBarImg0_y,
                  repeat: 'repeat'
                }
                /* normal: {
                      color: function(params) {
                          var num = myColor.length
                          return myColor[params.dataIndex % num]
                      }
                  }*/
              },
              z: 2
            }, {
              name: '白框',
              type: 'bar',
              yAxisIndex: 1,
              barGap: '-100%',
              data: [129.8, 129.9, 129.9, 129.9, 129.9, 129.9, 129.9, 129.9],
              barWidth: 40,
              itemStyle: {
                normal: {
                  show: false,
                  color: '#0e2147',
                  barBorderRadius: 2
                }
              },
              z: 1
            },
            {
              name: '外框',
              type: 'bar',
              yAxisIndex: 2,
              barGap: '-100%',
              data: [130, 130, 130, 130, 130, 130, 130, 130],
              barWidth: 42,
              label: {
                normal: {
                  show: false,
                  position: 'right',
                  distance: 10,
                  formatter: function(data) {
                    return this.dataLine[data.dataIndex] + '%'
                  },
                  textStyle: {
                    color: '#ffffff',
                    fontSize: '16'
                  }
                }
              },
              itemStyle: {
              },
              z: 0
            }
          ]

        }
        )
      }
    }
  }
</script>

<style scoped>

</style>
